<template>
  <view class="echarts-wrap" style="height: 520rpx">
    <mpvue-echarts
      @onInit="lineInit"
      :canvasId="canvasId"
      ref="radarChart"
      @sendImg="sendImg"
    />
    <image v-if="tempFilePath" :src="tempFilePath" class="imgCanvas"></image>
  </view>
</template>

<script>
import * as echarts from './echarts/echarts.min.5.2.0.js';
import mpvueEcharts from './echarts/echarts.vue';

export default {
  components: {
    mpvueEcharts
  },
  props: {
    canvasId: {
      type: String,
      default: 'radarChart'
    },
    chartData: {
      type: Array,
      default: () => []
    },
    indicator: {
      type: Array,
      default: () => []
    },
    areaColor: {
      type: Array,
      default: () => ['#6f46f8', '#38ca88', '#3698ff']
    },
    showRegion: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      radarOption: {
        radar: {
          center: ['50%', '50%'],
          radius: '60%',
          axisName: {
            formatter: (value, indicator) => {
              const name = indicator.name;
              const parts = name.split('');
              let formattedName = '';
              let charLength = 0;
              for (let i = 0; i < parts.length; i++) {
                charLength += this.checkCharLength(parts[i]);
                if (charLength >= 5) {
                  formattedName += '\n' + parts[i];
                  charLength = 0;
                } else {
                  formattedName += parts[i];
                }
              }
              return `{a|${formattedName}}`;
            },
            rich: {
              a: {
                color: '#555',
                fontSize: 14,
                align: 'left',
                lineHeight: 20
              }
            },
            textStyle: {
              color: '#fff'
            }
          },
          nameGap: 10,
          indicator: [],
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            type: 'radar',
            data: [[5, 5, 5, 5, 5, 5]],
            symbol: 'none',
            animation: false,
            lineStyle: {
              width: 1
            },
            areaStyle: {
              color: '#fff',
              opacity: 1
            }
            // areaStyle: {
            //   color: this.areaColor[2],
            //   opacity: 0.6
            // }
          },
          {
            type: 'radar',
            data: [[4, 4, 4, 4, 4, 4]],

            symbol: 'none',
            lineStyle: {
              width: 0
            },
            areaStyle: {
              color: '#E5EEF7',
              opacity: 1
            }
          },
          {
            type: 'radar',
            data: [[3, 3, 3, 3, 3, 3]],

            symbol: 'none',
            lineStyle: {
              width: 0
            },
            areaStyle: {
              color: '#fff',
              opacity: 1
            }
          },
          {
            type: 'radar',
            data: [[2, 2, 2, 2, 2, 2]],

            symbol: 'none',
            lineStyle: {
              width: 0
            },
            areaStyle: {
              color: '#E5EEF7',
              opacity: 1
            }
          },
          {
            type: 'radar',
            data: [[1, 1, 1, 1, 1, 1]],

            symbol: 'none',
            lineStyle: {
              width: 0
            },
            areaStyle: {
              color: '#fff',
              opacity: 1
            }
          },
          {
            type: 'radar',
            data: [],
            label: {
              show: false
            },
            // symbolSize: [6, 6],
            symbol: 'none',
            animation: false,
            lineStyle: {
              color: this.areaColor[2],
              //边缘颜色
              width: 2
            }
            // itemStyle: {
            //   borderWidth: 1,
            //   color: this.areaColor[2],
            //   borderColor: '#fff'
            // }
            // areaStyle: {
            //   color: this.areaColor[2],
            //   opacity: 0.6
            // }
          },
          {
            type: 'radar',
            data: [],
            label: {
              show: false
            },
            symbol: 'none',
            animation: false,
            lineStyle: {
              color: this.areaColor[1],
              //边缘颜色
              width: 2
            }
            // areaStyle: {
            //   color: this.areaColor[1],
            //   opacity: 0.6
            // }
          },
          {
            type: 'radar',
            data: [],
            label: {
              show: false
            },
            symbol: 'none',
            animation: false,
            lineStyle: {
              color: this.areaColor[0],
              //边缘颜色
              width: 2
            }
            // areaStyle: {
            //   color: this.areaColor[0],
            //   opacity: 0.6
            // }
          }
        ]
      },
      tempFilePath: null
    };
  },
  mounted() {
    this.chartCreate();
  },
  methods: {
    checkCharLength(char) {
      if (char.match(/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/)) {
        return 1;
      } else {
        return 0.5; // 英文字符宽度为0.5
      }
    },
    sendImg(img) {
      this.tempFilePath = img;
    },
    chartCreate() {
      if (this.$refs.radarChart) {
        this.$refs.radarChart.init();
      }
    },
    lineInit(e) {
      let { width, height } = e;
      let canvas = this.$refs.radarChart.canvas;
      echarts.setCanvasCreator(() => canvas);
      let radarChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(radarChart);
      radarChart.setOption(this.radarOption);
      radarChart.resize();
      this.$refs.radarChart.setChart(radarChart);
      let ctx = this.$refs.radarChart.ctx;
      let cid = ctx.canvasId;
      return radarChart;
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val && val.length) {
          this.radarOption.radar.indicator = this.indicator;
          this.radarOption.series[5].data = [val[0].radarData];
          this.radarOption.series[6].data = [val[1].radarData];
          this.radarOption.series[7].data = [val[2].radarData];
          this.$nextTick(() => {
            this.chartCreate();
          });
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style scoped>
.echarts-wrap {
  width: calc(100vw - 128rpx);
  margin-top: 12rpx;
  z-index: 0;
  position: relative;
}
.imgCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>
